<template>
  <div>
    <button @click="next">上一首</button>
    <button @click="next">下一首</button>
    <div id="aplayer"></div>
  </div>
</template>

<script>
// import aplayer from "vue-aplayer"
import { aplayer } from "aplayer";
export default {
  data() {
    return {
      // audio: [
      //   {
      //     name: "name1",
      //     artist: "artist1",
      //     url: "/api/musics/music_1463165983.mp3",
      //     cover: "cover1.jpg",
      //     lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing',
      //     theme: "#ebd0c2",
      //   },
      //   {
      //     name: "name2",
      //     artist: "artist1",
      //     url: "/api/musics/music_2049512697.mp3",
      //     cover: "cover1.jpg",
      //     lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing',
      //     theme: "#ebd0c2",
      //   },
      // ],
      APlayer: "",
      options: {
        autoplay: true,
        theme: "#FADFA3",
        loop: "all",
        order: "list",
        preload: "none",
        volume: 0.7,
        mutex: true,
        listFolded: true,
        listMaxHeight: 150,
        lrcType: 1,
      },
    };
  },
  methods: {
    next: function () {
      this.APlayer.skipForward()
      // console.log(this.APlayer.lrc.hide());
    }
  },
  components: {
    aplayer,
  },
  mounted: function () {
    this.options.audio = this.$audio;
    const APlayer = new this.$APlayer(this.options);
    APlayer.create_aplayer("aplayer");
    this.APlayer = APlayer.ap
  },
};
</script>